<template>
  <div class="youke">
    <Navs left></Navs>
    <Main pb>
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          v-if="nolist"
        >
          <div
            class="teams-item"
            v-for="(item,index) in list"
            :key="index"
          >
            <div class="teams-item_left">
              <div class="teams-item_handimg">
                <img
                  :src="item.Image"
                  alt
                >
              </div>
              <div class="teams-item_text">
                <div>
                  昵称:
                  <span>{{item.name}}</span>
                </div>
                <div>
                  手机号:
                  <span>{{item.mobile}}</span>
                </div>
              </div>
            </div>
            <div class="teams-item_right">
              <div>
                注册时间:
                <span>{{item.finishtime}}</span>
              </div>
              <div></div>
            </div>
          </div>
        </van-list>
        <nolist
          v-else
          imgshow="team"
        ></nolist>
      </van-pull-refresh>
    </Main>
  </div>
</template>

<script>
import { games } from "@/api";
import nolist from "@/components/common/nolist";
export default {
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      isLoading: false,
      page: 1,
      nolist: true
    };
  },
  created() {
    this.getlist();
  },
  components: {
    nolist
  },
  methods: {
    onLoad() {
      this.page += 1;
      this.getlist();
    },
    onRefresh() {
      this.nolist = true;
      this.loading=true
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.page = 1;
        this.list = [];
        this.getlist();
      }, 500);
    },
    getlist() {
      games.teams({ page: this.page }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0 && res.result) {
            this.list = [...this.list, ...res.result];
            this.loading = false;
            this.nolist = true;
            if (this.list.length == Number(res.count)) {
              this.finished = true;
            }
          } else {
            this.list = [];
            this.finished = true;
            this.loading = false;
            this.nolist = false;
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.teams-item {
  display: flex;
  padding: 0.5rem 1rem;
  margin-top: 0.3rem;
  justify-content: space-between;
  background: #fff;
  font-size: 12px;

  .teams-item_left {
    display: flex;
    justify-content: space-between;
    .teams-item_handimg {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: #000;
      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
      }
    }

    .teams-item_text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.5rem;
    }
  }

  .teams-item_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
